<template>
  <div>
    <div class="provider-list">
      <div class="content">
        <div class="project-info">
          <div class="form-box">
            <el-form
              ref="formRef"
              style="max-width: 1200px"
              :model="state.form"
              :rules="rules"
              label-position="top"
            >
              <el-form-item label="项目编号" prop="xmNo">
                <el-col :span="10">
                  <el-input size="large" v-model="state.form.xmNo" />
                </el-col>
              </el-form-item>
              <el-form-item label="项目名称" prop="xiangmumingcheng">
                <el-col :span="10">
                  <el-input
                    size="large"
                    v-model="state.form.xiangmumingcheng"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="项目介绍" prop="xaingmujieshao">
                <el-col :span="10">
                  <el-input
                    size="large"
                    type="textarea"
                    rows="8"
                    v-model="state.form.xaingmujieshao"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="项目类型" prop="xiangmuleixing">
                <el-select
                  v-model="state.form.xiangmuleixing"
                  size="large"
                  style="width: 452px !important"
                >
                  <el-option
                    v-for="item in state.type"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="业务分类" prop="yewufenlei1">
                <el-select
                  v-model="state.form.yewufenlei1"
                  size="large"
                  multiple
                  placeholder="一级业务"
                  :loading="state.loading1"
                  style="width: 240px"
                  @remove-tag="removeTag1"
                >
                  <el-option
                    v-for="item in state.type1"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
                <el-select
                  v-model="state.form.yewufenlei2"
                  size="large"
                  multiple
                  placeholder="二级业务"
                  :loading="state.loading2"
                  style="width: 240px; margin-left: 10px"
                  @visible-change="GetType2"
                  @remove-tag="removeTag2"
                >
                  <el-option
                    v-for="item in state.type2"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
                <el-select
                  v-model="state.form.yewufenlei3"
                  size="large"
                  multiple
                  placeholder="三级业务"
                  :loading="state.loading3"
                  style="width: 240px; margin-left: 10px"
                  @visible-change="GetType3"
                >
                  <el-option
                    v-for="item in state.type3"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                label="项目图片/视频(建议尺寸:750*560px)"
                prop="xiangmutupian"
              >
                <bjz-oss
                  :previewList="state.form.xiangmutupian"
                  :accept="['.jpg', '.png', '.jpeg', '.mp4']"
                  :allowMultiple="true"
                  :size="100"
                  @success="successIntroImg"
                  @remove="removeUploadFile1"
                />
              </el-form-item>
              <el-form-item label="招商状态">
                <el-select
                  v-model="state.form.zhaoshang"
                  style="width: 452px !important"
                  size="large"
                >
                  <el-option
                    v-for="item in state.merchantStatus"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="项目状态">
                <el-select
                  v-model="state.form.zhuangtai"
                  style="width: 452px !important"
                  size="large"
                >
                  <el-option
                    v-for="item in state.status"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="启动时间">
                <el-col :span="10">
                  <el-date-picker
                    v-model="state.form.qidongshijian"
                    value-format="YYYY-MM-DD"
                    type="date"
                    size="large"
                    placeholder="选择启动时间"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="项目档次">
                <el-col :span="10">
                  <el-input
                    size="large"
                    maxlength="40"
                    v-model="state.form.xiangmudangci"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="投资额（万元）">
                <el-col :span="10">
                  <el-input-number
                    size="large"
                    v-model="state.form.touzie"
                    :precision="4"
                    :controls="false"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="商业面积（万平米）" prop="shangyemianji">
                <el-col :span="10">
                  <el-input-number
                    size="large"
                    :precision="4"
                    v-model="state.form.shangyemianji"
                    :controls="false"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="商业楼层" prop="shangyelouceng">
                <el-col :span="10">
                  <el-input
                    size="large"
                    v-model="state.form.shangyelouceng"
                    maxlength="30"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="所属城市">
                <el-cascader
                  @change="selectCity"
                  style="width: 452px !important"
                  size="large"
                  :options="state.cities"
                  :props="state.cityProps"
                  :placeholder="state.cityPlaceholder"
                />
              </el-form-item>
              <el-form-item label="设计方/开发商/运营商" prop="yunyingshang">
                <el-select
                  v-model="state.form.yunyingshang"
                  size="large"
                  filterable
                  style="width: 452px !important"
                >
                  <el-option
                    v-for="item in state.operator"
                    :key="item.gysNo"
                    :label="item.gongsimingcheng"
                    :value="item.gysNo"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="连锁项目">
                <el-select
                  v-model="state.form.liansuo"
                  size="large"
                  style="width: 452px !important"
                >
                  <el-option
                    v-for="item in state.chains"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="入驻品牌">
                <el-select
                  v-model="state.form.pinpai"
                  size="large"
                  multiple
                  style="width: 452px !important"
                >
                  <el-option
                    v-for="item in state.brands"
                    :key="item.ppNo"
                    :label="item.pinpaimingcheng"
                    :value="item.ppNo"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="项目地址" prop="xiangmudizhi">
                <el-col :span="10">
                  <el-input
                    size="large"
                    maxlength="80"
                    v-model="state.form.xiangmudizhi"
                  />
                </el-col>
              </el-form-item>
              <el-form-item
                label="项目地址图片(建议尺寸:622*272px)"
                prop="xiangmudizhitupian"
              >
                <bjz-oss
                  :previewList="state.form.xiangmudizhitupian"
                  :accept="['.jpg', '.png', '.jpeg']"
                  @success="onSuccess"
                  @remove="removeUploadFile2"
                />
              </el-form-item>
              <el-form-item
                class="vue-editor"
                label="项目概况"
                prop="xiangmugaikuang"
              >
                <editor
                  :initValue="state.form.xiangmugaikuang"
                  @onVal="onVal"
                />
              </el-form-item>
              <el-form-item
                v-if="state.check === '1'"
                style="margin-top: 50px"
                label="审核状态"
              >
                <el-radio-group v-model="state.form.shenhe">
                  <el-radio :label="0">待审核</el-radio>
                  <el-radio :label="1">审核通过</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item style="margin-top: 50px; margin-top: 20px">
                <el-button
                  style="margin-left: 100px"
                  type="primary"
                  @click="submitForm(formRef)"
                  >提交信息</el-button
                >
                <el-button style="margin-left: 50px" @click="$router.go(-1)"
                  >取消</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import upimg from "@/assets/icon-upload.png";
import { AddProject, EditProject, GetEditProject } from "@/api/project";
import { GetDictionary, GetDictionaryTree, GetDistrict } from "@/api/system";
import { GetProviderOptions } from "@/api/provider";
import { GetBrandSelect } from "@/api/brand";
import { baseMsg } from "@/utils/utils";
const route = useRoute();
const router = useRouter();
const formRef = ref(null);
const validateImg = (rule, value, callback) => {
  if (state.form.xiangmutupian && state.form.xiangmutupian.length) {
    callback();
  } else {
    callback(new Error("请上传项目图片"));
  }
};
const validateImg1 = (rule, value, callback) => {
  if (state.form.xiangmudizhitupian && state.form.xiangmudizhitupian.length) {
    callback();
  } else {
    callback(new Error("请上传项目地址图片"));
  }
};
const rules = {
  xmNo: [
    {
      required: true,
      pattern: /^[A-Za-z0-9]+$/,
      message: "请输入项目编号(数字字母组合)",
      trigger: "blur",
    },
  ],
  xiangmumingcheng: [
    { required: true, message: "请输入项目名称", trigger: "blur" },
  ],
  xaingmujieshao: [
    { required: true, message: "请输入项目介绍", trigger: "blur" },
  ],
  xiangmuleixing: [
    { required: true, message: "请选择项目类型", trigger: "change" },
  ],
  yewufenlei1: [
    { required: true, message: "请选择业务分类", trigger: "change" },
  ],
  xiangmutupian: [{ required: true, trigger: "blur", validator: validateImg }],
  shangyemianji: [
    { required: true, message: "请输入商业面积", trigger: "blur" },
  ],
  shangyelouceng: [
    { required: true, message: "请输入商业楼层", trigger: "blur" },
  ],
  yunyingshang: [
    { required: true, message: "请选择运营商", trigger: "change" },
  ],
  xiangmudizhi: [
    { required: true, message: "请输入项目地址", trigger: "blur" },
  ],
  xiangmudizhitupian: [
    { required: true, trigger: "blur", validator: validateImg1 },
  ],
  xiangmugaikuang: [
    { required: true, message: "请输入项目概况", trigger: "blur" },
  ],
};
const state = reactive({
  upimg,
  form: {
    xmNo: "",
    xiangmumingcheng: "",
    xaingmujieshao: "",
    xiangmuleixing: "",
    yewufenlei1: [],
    yewufenlei2: [],
    yewufenlei3: [],
    xiangmutupian: [],
    zhaoshang: "",
    zhuangtai: "",
    qidongshijian: "",
    xiangmudangci: "",
    touzie: null,
    shangyemianji: null,
    shangyelouceng: "",
    chengshi: [],
    yunyingshang: "",
    liansuo: null,
    pinpai: [],
    xiangmudizhi: "",
    xiangmudizhitupian: [],
    xiangmugaikuang: "",
    shenhe: 0,
  },
  cities: [],
  loading1: true,
  loading2: true,
  loading3: true,
  // 项目类型
  type: [],
  // 项目业务分类
  type1: [],
  type2: [],
  type3: [],
  // 招商状态
  merchantStatus: [],
  // 项目状态
  status: [],
  // 项目运营商
  operator: [],
  // 项目入驻品牌
  brands: [],
  cityProps: {
    label: "label",
    value: "id",
  },
  chains: [
    {
      name: "连锁",
      value: 1,
    },
    {
      name: "非连锁",
      value: 0,
    },
  ],
  // 办公城市回显
  cityPlaceholder: "请选择办公城市",
  check: localStorage.getItem("check"),
});
// 查询项目类型
const GetSelect = async () => {
  const res = await GetDictionary({ dicId: "xiangmuleixing" });
  if (res.code == 4201) {
    state.type = res.data;
  }
};
// 查询项目招商状态
const GetMerchantStatus = async () => {
  const res = await GetDictionary({ dicId: "xiangmuzhaoshangzhuangtai" });
  if (res.code == 4201) {
    state.merchantStatus = res.data;
  }
};
// 查询项目运营商下拉列表
const GetOperator = async () => {
  const res = await GetProviderOptions();
  if (res.code == 4201) {
    state.operator = res.data;
  }
};
// 查询品牌类型
const GetBrands = async () => {
  GetBrandSelect().then((res) => {
    if (res.code == 4201) {
      state.brands = res.data;
    }
  });
};
// 查询项目状态
const GetStatus = async () => {
  const res = await GetDictionary({ dicId: "xiangmuzhuangtai" });
  if (res.code == 4201) {
    state.status = res.data;
  }
};
// 项目介绍图片上传
const successIntroImg = (res) => {
  state.form.xiangmutupian.push(res);
};
// 项目图片上传
const onSuccess = (res) => {
  state.form.xiangmudizhitupian.push(res);
};
// 上传文件删除
const removeUploadFile1 = (index) => {
  state.form.xiangmutupian.splice(index, 1);
};
const removeUploadFile2 = (index) => {
  state.form.xiangmudizhitupian.splice(index, 1);
};
const getCityList = async () => {
  // 城市列表下拉查询
  const res = await GetDistrict({ parentCode: 0, regionLevel: "city" });
  if (res.code == 4201) {
    state.cities = res.data;
    if (route.query.type == "edit" && state.form.chengshi?.length > 0) {
      let str = "";
      const arr = state.form.chengshi;
      // 国家
      let arr1 = {};
      // 省份
      let arr2 = {};
      // 城市
      let arr3 = {};
      // 区
      let arr4 = {};
      arr1 = res.data.find((item) => {
        return item.id == arr[0];
      });
      arr2 = arr1.children.find((item) => {
        return item.id == arr[1];
      });
      arr3 = arr2.children.find((item) => {
        return item.id == arr[2];
      });
      arr4 = arr3.children.find((item) => {
        return item.id == arr[3];
      });
      str =
        arr1.label + ` /${arr2.label}` + ` /${arr3.label}` + ` /${arr4.label}`;
      state.cityPlaceholder = str;
    }
  }
};
// 一级分类查询
const GetType1 = async () => {
  state.loading1 = true;
  const res = await GetDictionaryTree({ dicModel: "xiangmuzhuyingyewu" });
  if (res.code == 4201) {
    state.type1 = res.data;
    state.loading1 = false;
  } else {
    state.loading1 = false;
  }
};
// 查询二级分类
const GetType2 = (val) => {
  state.loading2 = true;
  state.type2 = [];
  if (state.form.yewufenlei1.length > 0) {
    state.form.yewufenlei1.forEach((item) => {
      let obj = {};
      GetDictionary({ dicId: item }).then((res) => {
        obj = res;
        if (obj.code == 4201 && obj.data.length > 0) {
          obj.data.forEach((item) => {
            state.type2.push(item);
          });
        }
      });
    });
    state.loading2 = false;
  } else {
    state.loading2 = false;
  }
};
// 查询三级分类
const GetType3 = (val) => {
  state.loading3 = true;
  state.type3 = [];
  if (state.form.yewufenlei2.length > 0) {
    state.form.yewufenlei2.forEach((item) => {
      let obj = {};
      GetDictionary({ dicId: item }).then((res) => {
        obj = res;
        if (obj.code == 4201 && obj.data.length > 0) {
          obj.data.forEach((item) => {
            state.type3.push(item);
          });
        }
      });
    });
    state.loading3 = false;
  } else {
    state.loading3 = false;
  }
};
// 移除已选择的标签
const removeTag1 = () => {
  state.form.yewufenlei2 = [];
  state.type2 = [];
  state.form.yewufenlei3 = [];
  state.type3 = [];
};
const removeTag2 = () => {
  state.form.yewufenlei3 = [];
  state.type3 = [];
};
// 选择城市
const selectCity = (value) => {
  state.form.chengshi = value;
};
// 项目编辑查看
const getProject = async () => {
  if (route.query.type == "edit") {
    const res = await GetEditProject({ id: route.query.id });
    if (res.code == 4201) {
      state.form = res.data;
      GetType2();
      GetType3();
    }
  }
};
// 富文本编辑器
const onVal = (val) => {
  state.form.xiangmugaikuang = val;
};
// 提交表单
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (route.query.type == "add") {
        AddProject(state.form).then((res) => {
          if (res.code == 4202) {
            baseMsg("新增项目成功");
            router.go(-1);
          }
        });
      }
      if (route.query.type == "edit") {
        EditProject(state.form).then((res) => {
          if (res.code == 4202) {
            baseMsg("编辑项目成功");
            router.go(-1);
          }
        });
      }
    }
  });
};
GetType1();
GetSelect();
GetStatus();
GetMerchantStatus();
GetBrands();
GetOperator();
getProject();
getCityList();
</script>
<style lang="scss" scoped>
.content {
  border: none !important;
}
.project-info {
  width: 100%;
  padding: 30px 100px;
  font-size: 20px;
  color: black;
  display: flex;
  .form-box {
    margin: 80px auto 0 auto;
    flex: 1;
  }
}
</style>
